<!--
  * 出库单
  *
  * @Author:    zzx
  * @Date:      2025-08-13 15:17:33
  * @Copyright  zzx
-->
<template>

  <div class="detail-header">
    <a-page-header title="出库信息">
      <template #extra>
        <a-button @click="toEditOutbound" type="primary">编辑</a-button>
      </template>
      <div>
        <a-descriptions size="small" :column="3">
          <a-descriptions-item label="收货联系人">{{ detail.receiveUser}} - {{ detail.receiveTel}}</a-descriptions-item>
          <a-descriptions-item label="司机联系人">{{ detail.driverUser}} - {{ detail.driverTel}}</a-descriptions-item>
          <a-descriptions-item label="是否完成出库">
            <div>
              <a-tag v-if="detail.outboundComplete===1" color="green">是</a-tag>
              <a-tag v-else color="red">否</a-tag>
            </div>
          </a-descriptions-item>
          <a-descriptions-item label="备注">{{ detail.remark}}</a-descriptions-item>
        </a-descriptions>
      </div>
    </a-page-header>
  </div>

  <a-card
      class="smart-margin-top10"
      size="small">
    <!---------- 表格 begin ----------->
    <a-table
        size="small"
        :scroll="{ y: 1000 }"
        :dataSource="detail.list"
        :columns="columns"
        rowKey="outboundItemId"
        bordered
        :pagination="false"
    >
      <template #bodyCell="{ text, record, column }">
        <template v-if="column.dataIndex === 'total'">
          <span>主材</span>
        </template>
        <template v-if="column.dataIndex === 'quotationName'">
          <a @click="toDetail(record.quotationId)">{{record.quotationName}}</a>
        </template>

        <template v-if="column.dataIndex === 'action'">
          <div class="smart-table-operate">
            <a-button @click="toEditQuotation(record.quotationId)" type="link">编辑</a-button>
            <a-button @click="onDelete(record)" danger type="link">删除</a-button>
          </div>
        </template>
      </template>
    </a-table>
  </a-card>

</template>
<script setup>
import {reactive, ref, nextTick, onMounted} from 'vue';
  import _ from 'lodash';
  import { message } from 'ant-design-vue';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { outboundInfoApi } from '/@/api/business/project/outbound-info-api';
  import { smartSentry } from '/@/lib/smart-sentry';
  import FilePreview from "/@/components/support/file-preview/index.vue";
import {useRoute, useRouter} from "vue-router";

  // ------------------------ 事件 ------------------------

  const emits = defineEmits(['reloadList']);

  // ------------------------ 显示与隐藏 ------------------------

  const route = useRoute();
  let cuttingId = ref();
  let outboundId = ref();

  onMounted(() => {
    if (route.query.cuttingId) {
      cuttingId.value = Number(route.query.cuttingId);
    }
    if (route.query.outboundId) {
      outboundId.value = Number(route.query.outboundId);
    }
    getDetail();
  });

  // 详情
  let detail = ref({});
  async function getDetail() {
    try {
      let result = await outboundInfoApi.detail(outboundId.value);
      detail.value = result.data;
    } catch (error) {
      smartSentry.captureError(error);
    } finally {
      SmartLoading.hide();
    }
  }

  const columns = ref([
    {
      title: '序号',
      dataIndex: 'serialNumber',
      ellipsis: true,
      width: 50,
    },
    {
      title: '位置',
      dataIndex: 'itemPosition',
      ellipsis: true,
      width: 150,
    },
    {
      title: '品名',
      dataIndex: 'itemProductName',
      ellipsis: true,
    },
    {
      title: '长(mm)',
      dataIndex: 'itemLong',
      ellipsis: true,
      width: 150,
    },
    {
      title: '宽(mm)',
      dataIndex: 'itemWidth',
      ellipsis: true,
      width: 150,
    },
    {
      title: '高(mm)',
      dataIndex: 'itemHeight',
      ellipsis: true,
      width: 150,
    },
    {
      title: '单位',
      dataIndex: 'itemUnit',
      ellipsis: true,
      width: 100,
    },
    {
      title: '数量',
      dataIndex: 'itemNum',
      ellipsis: true,
      width: 100,
    },
    {
      title: '备注',
      dataIndex: 'remark',
      ellipsis: true,
    }
  ]);

  let router = useRouter();
  function toEditOutbound() {
    router.push({ path: '/erp/project/components/outbound-info-form',
      query: { cuttingId: cuttingId.value, outboundId: outboundId.value } });
  }
</script>


<style scoped lang="less">
.detail-header {
  background-color: #fff;
  padding: 10px;
}
</style>
